import React, { useEffect } from 'react';
import { Row, Col } from 'antd';
import { useTRState, TjChart } from '@/pages/ETrade/components';
import styles from '../index.less';
import { chart1_lable, chart2_lable } from '../helper/charts';
const ChartsBox = ({ charts, date, setChartImgs, hoverData }) => {
  const [state, setState] = useTRState({
    chartImgs: [],
  });

  /** methods */
  const setImg = (img, i) => {
    state.chartImgs[i] = img;
    setState({
      chartImgs: state.chartImgs,
    });
    setChartImgs(state.chartImgs);
  };
  return (
    <div className={styles.box}>
      <Row gutter={[0, 16]}>
        <Col span={24} style={{ marginBottom: 30 }}>
          <div className={styles.chart1_title}>供需分析</div>
          <div className={styles.chart1_label}>
            <span>单位：MW</span>
            <span style={{ color: 'rgba(255, 255, 255, 0.9)' }}>
              {date} {hoverData?.time || '00:00'}
            </span>
            {chart1_lable.map((item) => {
              return (
                <span>
                  {item.type}
                  <span style={{ color: item.color }}>{hoverData[item.key] || ''}</span>
                </span>
              );
            })}
          </div>
          <div style={{ height: 380 }}>
            <TjChart group="A" option={charts[0]} getImg={(img) => setImg(img, 0)} />
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.chart1_title}>河东现货市场出清电价</div>
          <Row className={styles.chart2_label}>
            <Col span={4}>
              <span>元/MWh</span>
            </Col>
            <Col span={10} offset={5}>
              <div className={styles.chart2_flex}>
                {chart2_lable.map((item) => {
                  return (
                    <div className={styles.chart2_flex}>
                      <div className={styles.chart2_img_box} style={{ background: item.bg }} />
                      <div>{item.label}</div>
                    </div>
                  );
                })}
              </div>
            </Col>
          </Row>
          <div style={{ height: 270 }}>
            <TjChart group="B" option={charts[1]} getImg={(img) => setImg(img, 1)} />
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.chart1_title}>河西现货市场出清电价</div>
          <Row className={styles.chart2_label}>
            <Col span={4}>
              <span>元/MWh</span>
            </Col>
            <Col span={10} offset={5}>
              <div className={styles.chart2_flex}>
                {chart2_lable.map((item) => {
                  return (
                    <div className={styles.chart2_flex}>
                      <div className={styles.chart2_img_box} style={{ background: item.bg }} />
                      <div>{item.label}</div>
                    </div>
                  );
                })}
              </div>
            </Col>
          </Row>
          <div style={{ height: 270 }}>
            <TjChart group="B" option={charts[2]} getImg={(img) => setImg(img, 2)} />
          </div>
        </Col>
      </Row>
    </div>
  );
};
export default ChartsBox;
